<template>
    <div class="order-box">
        <van-nav-bar fixed title="我的订单" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" size="18" />
            </template>
        </van-nav-bar>
        <!-- van-tabs -->
        <van-tabs v-model:active="active">
            <van-tab v-for="item in tabs" :key="item.text" :title="item.text"></van-tab>
        </van-tabs>
        <!-- list -->
        <van-list :offset="80" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in list" :key="item.orderId">
                <template #default="orderItem">
                    <div>
                        <p>
                            订单时间：{{ item.createTime }} ----
                            {{ item.orderStatusString }}
                        </p>
                        <div v-for="v in item.newBeeMallOrderItemVOS" :key="v.goodsId">
                            <img style="width: 180px" :src="v.goodsCoverImg" alt="" />
                            <p>名称：{{ v.goodsName }}</p>
                            <p>单价：{{ v.sellingPrice }}</p>
                        </div>
                        <p>总价格：{{ item.totalPrice }}</p>
                    </div>
                </template>
            </van-cell>
        </van-list>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue"
import { getOrderList } from "@/api/index.js"

let tabs = reactive([
    {
        text: "全部",
        status: "",
    },
    {
        text: "待付款",
        status: "0",
    },
    {
        text: "待确认",
        status: "1",
    },

    {
        text: "待发货",
        status: "2",
    },
    {
        text: "已发货",
        status: "3",
    },
    {
        text: "交易完成",
        status: "4",
    },
]);
const loading = ref(false);
const finished = ref(false);
const list = ref([]);  // 数据源
const pageNumber = ref(1); // 第几页
const status = ref(""); // 订单的状态
const active = ref(0); // index和tabs绑定

const onLoad = () => {
    getOrderList(pageNumber.value++, status.value).then(res => {
        if (res.resultCode === 200) {
            if (res.data.list.length === 0) {
                finished.value = true;
            }
            list.value = list.value.concat(res.data.list)
            loading.value = false;
        }
    })
};

// 监听active的变化
watch(active, (newVal, oldVal) => {
    // console.log("newVal:", newVal);
    // console.log("oldVal:", oldVal);
    status.value = tabs[newVal].status;
    pageNumber.value = 1;
    list.value = [];
    finished.value = false;
    onLoad(); // 重新发请求
});

</script>
<style lang="less" scoped>
.order-box {
    .van-tabs {
        position: fixed;
        top: 1.2rem;
        width: 100%;
        left: 0;
        z-index: 300
    }

    .van-list {
        padding-top: 2.2rem;
    }
}
</style>